import Encapsulation from "./DrawEncaClass";

class DrawEncapsulation{
    drawCanvas = null;

    config = {
        edit: true,
        grig: true,
        mirror: false,
        rotate: 0,
        gridSize:{
            x: 0.5,
            y: 0.5
        },
        smallDist:{
            x: 0,
            y: 0
        }
    }
    
    /**
     * @type {HTMLElement}
     */
    parent = null;

    /**
     * 当前显示的层级
     */
    viewStatus = {
        boardLayer:[],
        pinLayer:[]
    }

    // 编辑的历史记录
    history = {
        historyList:[],
        nowStatus:0
    }

    constructor(options){
        this.parent = util.getElement(options.parent);
        this.encapsulation = new Encapsulation(options.encaData);
        this.drawCanvas = new EncapsulationCanvas(this.parent);
        this.drawCanvas.setUser(this);
        this.setOrigin();
        this.draw();
    }

    setOrigin(){
        this.drawCanvas.setOrigin({x: 0,y: 0})
    }

    changeView({layer,pin}){
        this.changeLayerView(layer);
        this.changePinLayerView(pin);
    }

    changeLayerView(layerStatus){

    }

    changePinLayerView(pinStatus){

    }

    draw(){
        this.drawCanvas.draw();
    }
}

// 绘制封装
class EncapsulationCanvas{
    /**
     * @type {DrawEncapsulation}
     */
    user = null;

    drawCanvas = {
        grid: {
            canvas: null,
            drawInstance: null
        },
        preview: {
            canvas: null,
            drawInstance: null
        },
        shape: {
            canvas: null,
            drawInstance: null
        },
        graphic: {
            canvas: null,
            drawInstance: null
        },
        shapePreview: {
            canvas: null,
            drawInstance: null
        }
    }

    origin = {
        x: 0,
        y: 0
    }

    drawCanvasNames = ["grid","graphic","shape","preview","shapePreview"];

    scale = 50;

    size = {
        width: 300,
        height: 300
    }

    /**
     * @type {DrawEncapsulation}
     */
    drawEncaInstance = null;
    /**
     * @type {HTMLElement}
     */
    parentNode = null;
    /**
     * @type {HTMLElement}
     */
    parent = null;

    constructor(canvas){
        let layers = Object.keys(canvas)
        this.parent = parent;
        this._init();
    }

    _init(){

        this.setCanvasSize(width,height);
    }

    _initEvent(){
        // 监听大小
        window.addEventListener("resize",resize);

        this.parentNode.addEventListener("wheel",wheel,{ passive: true });

        // 鼠标移动
        this.parentNode.addEventListener("mousemove",mousemove);

        function resize(){
            this.event.trigger("resize",e);
        }

        function wheel(){
            this.event.trigger("mousewheel",e);
        }

        function mousemove(){
            this.event.trigger("mousemove",e);
        }

        function mousedown(){
            Event.trigger("mousedown",e);
        }

        function mouseup(){
            Event.trigger("mouseup",e);
        }
    }

    setOrigin(origin){
        this.origin.x = origin.x;
        this.origin.y = origin.y;
        this.drawCanvasNames.forEach((canvasName)=>{
            this.drawCanvas[canvasName].drawInstance.setOrigin(origin);
        });
    }

    setScale(scale){
        this.scale = scale;
    }

    drawGrid(){
        this.drawCanvas.grid.drawInstance.clear();
        let gridSize = {
            x: this.user.config.gridSize.x,
            y: this.user.config.gridSize.y
        }
        let drawSize = {
            x: gridSize.x * this.scale,
            y: gridSize.y * this.scale
        }
        this.drawCanvas.grid.drawInstance.setGrid(drawSize);
    }

    draw(){
        this.drawGrid();
    }

    setUser(user){
        this.user = user;
    }
}